<template>
  <h1>1.组件的基本写法</h1>
  <h2>
    person: name--{{ person.name }} age--{{ person.age }}
     sex--{{person.sex}}--score--{{ person.score }}---hobby:{{ person.hobby }}
  </h2>
  <button @click="changePerson">改变person</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
 
});
</script>

<script lang="ts" setup>
import { reactive } from "vue";
/* 
  reactive创建一个对象类型值的响应式数据
   -reactive返回一个代理对象，这个代理对象就是响应式的
   -我们在模板和setup中可以直接使用这个代理对象进行增删改操作
*/
// ts的用法是要用一个interface来做开头的  ?号是做可选
interface personType {
  name?:string;
  age?: number;
  sex?: string;
  score?: number;
  hobby?: string[];
}

const person = reactive<personType>({
  name:"韩明美",
  age:53,
  sex:"女",
  hobby:["气质美女","有爱心"],
});
console.log(person);

const changePerson =()=>{
/*   // 改
  person.name="李校";
  // 增
  person.score=100;
  // 删
  delete person.age; */
  // 深层次也可以响应式，数组的直接操作也是可以响应式的
  // as这个是断言，要用大括号括着它
  (person.hobby as string[])[0]="rap";
};
</script>
<style scoped></style>
